<template>
    <div class="header hcenter headers">
      <p class="hcenter header-box">
        <img src="../../../public/logo.png" alt="" class="logo-img">
        梦学谷会员管理系统
      </p>
      <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link name">
          {{getUserInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="changePass">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
      </el-dropdown>
      <!-- 修改密码弹出框 -->
      <change-password></change-password>
    </div>
    
</template>

<script>
import changePassword from '../common/changePassword.vue'
export default {
  data() {
    return {
    }
  },
  computed : {
    // 获取用户信息
    getUserInfo(){
      return this.$store.getters.getUserInfo || ""
    }
  },
  methods: {
    // 打开弹框
    handleshowdialog(){
      this.$store.state.dialogFormVisible = true
    },
    // 关闭弹框
    handleclosedialog(){
      this.$store.state.dialogFormVisible = false
    },
    // 点击下拉菜单内容
    handleCommand(command) {
      switch (command) {
        // 点击修改密码
        case "changePass":
          this.handleshowdialog()
          break;
        // 点击退出登录
        case "logout" :
          this.$store.dispatch('handleLogout')
          break;
      }
    },
  },
  components: {
    changePassword
  }
}
</script>

<style scoped>
.name {
  width: 100px !important;
  display: flex;
}
.header-box {
  width: 1600px;
}
.logo-img {
  margin: 0 10px;
  width: 25px;
  height: 25px;
  padding-left: 40px;
}
.el-dropdown {
   color: #fff !important;
}
.el-dialog__header {
  line-height: 50px;
  padding: 20px 30px 10px;
}
.el-dialog__body {
  line-height: 50px;
  padding: 20px 30px 0px !important;
}
.dialog-footer {
  text-align: center;
  padding-bottom: 50px;
}
.el-input__inner {
  width: 220px !important;
}
</style>
